<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <script src="/layui/layui.js"></script>
  <script src="/js/jquery/jquery-3.5.1.js"></script>
  <script src="/js/book/book.js"></script>
  <link rel="stylesheet" href="/layui/css/layui.css">
  <link rel="stylesheet" href="/css/bookList.css">
  <link rel="stylesheet" href="/component/pear/css/pear.css" />
  <script src="/component/pear/pear.js"></script>
<!--  <script src="/js/book/bookCommon.js"></script>-->
  <title>规则处理</title>
<!--  <style>
    .layui-table-cell{
      display:table-cell;
      vertical-align: middle;
    }
  </style>-->
</head>
<body>
<div class="layui-card">
  <div class="layui-card-body">
    <form class="layui-form" action="">
      <div class="layui-form-item" lay-filter="book-rule">
        <label class="layui-form-label">规则名称</label>
        <div class="layui-input-inline">
          <input type="text" name="ruleName" placeholder="规则名称" class="layui-input">
        </div>
        <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
          <i class="layui-icon layui-icon-search"></i>
          查询
        </button>

      </div>
    </form>
  </div>
</div>

<script type="text/html" id="rule-tabler">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add">新增规则</button>
    <button class="layui-btn layui-btn-sm" lay-event="checkBtn">校验规则</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">删除数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="jsonBtn">json编辑测试</button>
  </div>
</script>


<div class="layui-card">
  <div class="layui-card-body">
    <table id="rule-table" class="rule-table" lay-filter="rule-table">
    </table>
  </div>
</div>

<script>
  layui.use(['layer','form','table'], function(){
    let table = layui.table;
    let form = layui.form;
    let $ = layui.jquery;
    let layer = layui.layer;



    //监听提交
    form.on('submit(user-query)', function(data){
      var rs = JSON.stringify(data.field);
      $.ajax({
        type:"post",
        url: "/BookAdmin/queryRuleSet",
        data:JSON.stringify(data.field),
        dataType:"json",
        contentType : "application/json; charset=utf-8",
        success: function(res){
          if(res.data){
            debugger
            table.render({
              elem:"#rule-table",
              data:res.data,
              skin: 'line',
              toolbar: '#rule-tabler',
              defaultToolbar: [{
                layEvent: 'refresh',
                icon: 'layui-icon-refresh',
              }, 'filter', 'print', 'exports'],
              cols: [
                [
                  {type: 'checkbox'}
                  , {field: 'ruleName', title: '名称', width: 180 , templet: ruleSetLink }
                  , {field: 'rootSource', title: '来源', width: 200 }
                  , {field: 'rootSearch', title: '搜索地址', width: 380}
                  , {field: 'rootType', title: '发送方式', width: 150}
                  , {field: 'ruleBookList', title: '对应书籍表', width: 300}
                  , {field: 'ruleChapterList', title: '对应章节表', width: 310}
                  , {field: 'isStop', title: '状态', width: 100 , templet: '#switchTpl', unresize: true}

                ] //设置表头
              ],
              parseData: function(data) { //res 即为原始返回的数据
                return {
                  "code": 0, //解析接口状态
                  "msg": "", //解析提示文本
                  "count": 100, //解析数据长度
                  "data": data //解析数据列表
                }
              }
              ,limit:10
              , limits: [10, 50, 100]
              , page: true //开启分页
            });
          }else{
            layer.msg("未获取数据")
          }
        }
      });
      return false;
    });
    function ruleSetLink(d){
        return '<a class="layui-table-link" href="javascript:void(0);"  lay-event="bklikn">' + d.ruleName + '</a>';
    }
    table.on('tool(rule-table)', function(obj) {
     if(obj.event ==='bklikn'){
        active.bklikn(obj);
      }
    });
    var active = {
      bklikn: function (obj) {
        var data = obj.data;
        ds = data;
       layer.open({
          title: "" ,
          type: 2,
          content: '/alert/book/admin/bookRuleEdit',
          data: ds,
          area: ['1050px', '650px'],
          shadeClose: true,
          closeBtn :0,
          maxmin: false
        });
      }
    }
    //监听状态
    form.on('switch(rule-state)', function(obj){
      debugger
      layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
    });

    table.on('toolbar(rule-table)', function(obj){
      var checkStatus = table.checkStatus(obj.config.id);
      switch (obj.event) {
        case "add":
          layui.use('layer', function(){
            layer.open({
              type: 2,
              title: '',
              shadeClose: true,
              closeBtn: 0,
              shade: 0.8,
              area: ['1050px', '650px'],
              content: '/alert/book/admin/bookRuleEdit'
            });
          });
          break;
        case 'checkBtn':
          layui.use('layer', function(){
            layer.open({
              type: 2,
              title: '规则校验',
              shadeClose: true,
              closeBtn: 1,
              shade: 0.8,
              area: ['1050px', '600px'],
              content: '/alert/book/admin/checkRule'
            });
          });
          break;
        case 'getCheckData':
          var data = checkStatus.data;

          layer.confirm("确认要删除吗，删除后不能恢复", { title: "删除确认" }, function (index) {
            $.ajax({
              type:"post",
              url: "/BookAdmin/deleteRuleSet",
              data:JSON.stringify(data),
              dataType:"json",
              contentType : "application/json; charset=utf-8",
              success: function(res){
                if(res.data.code>0)
                  layer.msg(res.data.msg);
                  parent.layer.close(index);

              }
            });
          });
          break;
      }
    });


  });
</script>
<script type="text/html" id="switchTpl">
  <input type="checkbox" name="isStop" value="{{d.ruleId}}" lay-skin="switch" lay-text="启用|停止" lay-filter="rule-state" {{ d.isStop=='0' ? 'checked' : '' }}>
</script>

</body>
</html>